<template>
  <view class="newsDetails">
    <template v-if="title === '设备拆卸'">
      <uni-list>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('印章名称')}}:
              <text class="text">{{ dataList.deviceName }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('拆章人')}}:
              <text class="text">{{ dataList.userName }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('加盖次数')}}:
              <text class="text">{{ dataList.useCount }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('拆章位置')}}:
              <text class="text">{{ dataList.location }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('拆章时间')}}:
              <text class="text">{{ dataList.realTime }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item v-if="dataList.fileEntity">
          <template slot="body">
            <view class="u-cell-group" @click="navigateTo(item)">
              <view class="title">{{$t('拆章图片')}}:</view>
              <u-image
                :src="dataList.fileEntity.fileUrl + '?Authorization=' + userInfo.token + '&us=app'"
                border-radius="10"
                class="item-image"
                height="150rpx"
                width="150rpx"
                @click="previewImage(dataList.fileEntity, index, $t('拆章图片'))"
              ></u-image>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </template>
    <template v-else>
      <uni-list>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('创建时间')}}:
              <text class="text">{{ dataList.createDate }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('消息标题')}}:
              <text class="text">{{ dataList.title }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('消息类型')}}:
              <text class="text">{{ dataList.type === 0 ? $t('通知') : $t('告警') }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template slot="body">
            <view class="title">
              {{$t('消息内容')}}:
              <text class="text">{{ dataList.content }}</text>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </template>

    <!-- 图片浏览 -->
    <lizhao-image-picture
      :isShow="Image.isShow"
      :showIndex="Image.showIndex"
      :swiperImages="Image.list"
      maxUrlId="fileId"
      src="fileUrl"
      @close="Image.isShow = false"
    ></lizhao-image-picture>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: mapGetters(['userInfo', 'api']),
  data() {
    return {
      noticeId: '',
      title: '',
      dataList: {},
      Image: {
        list: [],
        isShow: false,
        showIndex: 0
      }
    }
  },
  onLoad(option) {
    uni.setNavigationBarTitle({title: this.$t('消息详情')})
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('props', (data) => {
      this.noticeId = data.data.id
      this.title = data.data.title
      if (this.title === '设备拆卸') {
        this.getDataList()
      } else {
        this.checkNoticeV2()
      }
    })
    eventChannel.emit('see', { data: true })
  },
  methods: {
    checkNoticeV2() {
      this.$u
        .get(this.api.GLOBAL_app_notice_checkNoticeV2, { noticeId: this.noticeId })
        .then((res) => {
          if (res.code === 200) {
            this.dataList = res.data
          }
        })
    },
    //获取数据
    getDataList() {
      this.$u
        .get(this.api.GLOBAL_device_disassemblyRecordInfo_getInfoByNoticeId, {
          noticeId: this.noticeId
        })
        .then((res) => {
          if (res.code === 200) {
            this.dataList = res.data
          }
        })
    },
    //浏览图片
    previewImage(row, index, title) {
      this.Image.list[0] = {
        title,
        ...row
      }
      this.Image.isShow = true
      this.Image.showIndex = index //显示图片第几个
    }
  }
}
</script>

<style lang="scss" scoped>
.newsDetails {
  width: 750upx;
  height: 100%;

  .title {
    color: #000000;
    font-size: 14px;

    .text {
      color: #888;
      margin-left: 5px;
    }
  }
}
</style>
